<template>
  <el-container>
    <el-aside width="auto">
      <common-aside/>
    </el-aside>
    <el-container>
      <el-header style="padding: 0">
        <common-header/>
      </el-header>
      <div class="manage">
        <div class="manage-header">
      <el-main>
        <!-- 搜索框 -->
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>

        <div style="margin: 10px 0">
          <el-button type="primary" @click="handlecreate">新增<i class="el-icon-circle-plus-outline"></i></el-button>
        </div>
        <!-- 对话框:点击新增/编辑才会弹出表单 -->
        <el-dialog
            :title="modalType == 0 ? '新建' : '编辑'"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="closeDialog">
          <!-- 新建/表单Form -->
          <el-form :inline="true" model="form" :rules="rules" label-width="80px">
            <!-- 每一项表单域:el-form-item -->
            <el-form-item label="ID" prop="id">
              <el-input placeholder="请输入ID" v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item label="配置名称" prop="name">
              <el-input placeholder="请输入配置名称" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="amount">
              <el-input placeholder="请输入配置数量" v-model="form.amount"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input placeholder="请输入备注" v-model="form.remark"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible=false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </el-dialog>


        <el-table :data="tableData" border stripe style="width: 100%" height="90%">
          <el-table-column prop="id" label="ID" width="140">
          </el-table-column>
          <el-table-column prop="name" label="配置名称" width="140">
          </el-table-column>
          <el-table-column prop="amount" label="数量" width="140">
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="140">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
              <el-button type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pager">
          <el-pagination layout="prev, pager, next" :total="total" @current-change="currentChange">
          </el-pagination>
        </div>
      </el-main>
        </div>
      </div>
    </el-container>
  </el-container>
</template>

<script>
import CommonAside from '../components/CommonAside.vue'
import CommonHeader from "@/components/CommonHeader.vue";

export default {
  data(){
    return{
     // 表单绑定的数据
      form: {
        id: '',
        name: '',
        amount: '',
        remark: '',
      },
      // 表单是否打开
      dialogVisible:false,
      //得到的数据赋值给该列表
      tableData:[],
      //表单验证规则,required=true/一定要写，blur/触发验证的时机：鼠标光标离开
      rules: {
        id: [{ required: true, message: '请输入id', trigger: 'blur' }],
        name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
        amount: [{ required: true, message: '请输入配置数量', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      // 打开表单:新建0,编辑1
      modalType: 0,
      // 分页的对象
      pageData: {
        page: 1,
        limit: 20
      },
      // 分页页数
      total: 0,
      // 搜索框表单
      searchForm: {
        name: ''
      }
    }
  },
  components:{
    CommonAside,
    CommonHeader
  },
  methods:{
    // 获取列表数据
    getList() {
      // 由接口文档知传入一个对象:要返回的是当前页面数据和搜索到的数据的交集
      getUser({ params: { ...this.pageData, ...this.searchForm } }).then((data) => {
        this.tableData = data.data.list
        this.total = data.data.count || 0
      })
    },
    // 表单提交
    submit() {
      // 要用箭头函数,若用function会报错,不知道为什么
      this.$refs.form.validate((valid) => {
        // 符合校验
        if (valid) {
          // 提交数据
          if (this.modalType === 0) {
            // 新增
            createUser(this.form).then(() => {
              this.getList()
            })
          } else {
            // 编辑
            updateUser(this.form).then(() => {
              this.getList()
            })
          }
          // 清空,关闭
          this.closeDialog()
        }
      })
    },
    // 关闭对话框
    closeDialog() {
      // 先重置
      this.$refs.form.resetFields()
      // 后关闭
      this.dialogVisible = false
    },
    handleDelete(index) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 编辑按钮
    handleEdit(index) {
      this.modalType = 1
      this.openForm()
      // 深拷贝
      this.form = JSON.parse(JSON.stringify(index))
    },
    // 新建按钮
    handlecreate() {
      this.modalType = 0
      this.openForm()
    },
    // 打开表单
    openForm() {
      this.dialogVisible = true
    },
    // 改变页码
    currentChange(val) {
      this.pageData.page = val
      this.getList()
    },
    // 搜索
    search() {
      this.getList()
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.manage {
  height: 100%;

  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .common-table {
    height: 90%;
    position: relative;

    .pager {
      position: absolute;
      right:20px;
      bottom: 0;
    }
  }
}
</style>

